<template>
  <swiper 
    class="service-banner" 
    :indicator-dots="showIndicator" 
    :autoplay="autoplay" 
    :interval="interval" 
    :duration="duration"
    :indicator-active-color="indicatorActiveColor"
    :indicator-color="indicatorColor"
  >
    <swiper-item v-for="(item, index) in banners" :key="index" @click="onBannerClick(item, index)">
      <image :src="item.image" mode="widthFix" class="service-banner__image" />
    </swiper-item>
  </swiper>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  banners: {
    type: Array,
    default: () => []
  },
  showIndicator: {
    type: Boolean,
    default: true
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  duration: {
    type: Number,
    default: 500
  },
  indicatorActiveColor: {
    type: String,
    default: '#07c160'
  },
  indicatorColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0.5)'
  }
});

const emit = defineEmits(['click']);

const onBannerClick = (item, index) => {
  emit('click', { item, index });
};
</script>

<style lang="scss" scoped>
.service-banner {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  
  &__image {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>
